<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>006-html表格</title>
	</head>
	<body>
		<!--
    tr：table row 的缩写，表示表格的一行。
    th：table header 的缩写，表示表格的表头内容。
    td：table data 的缩写，表示表格中的一个单元格。
    colspan：表示单元格横跨的列数。
    rowspan：表示单元格纵向跨的行数。
    -->

		<table border="1">
			<!-- caption 定义表格标题 -->
			<caption>
				学生信息表
			</caption>

			<!-- colgroup 定义表格列的组 -->
			<colgroup>
				<col span="2" style="background-color: red" />
				<col style="background-color: yellow" />
			</colgroup>

			<!-- thead 用于定义表格的标题部分 -->
			<thead>
				<tr>
					<th>name</th>
					<th>age</th>
					<th>gender</th>
				</tr>
			</thead>

			<!-- tbody 用于定义表格的主体部分 -->
			<tbody>
				<tr>
					<td>行1，列1</td>
					<td>行1，列2</td>
					<td>行1，列3</td>
				</tr>
				<tr>
					<td>行2，列1</td>
					<td>行2，列2</td>
					<td>行2，列3</td>
				</tr>
				<tr>
					<td colspan="2">行3，列1-2</td>
					<td>行3，列3</td>
				</tr>
			</tbody>

			<!-- tfoot 用于定义表格的脚注部分 -->
			<tfoot>
				<tr>
					<td>总计</td>
					<td>20</td>
					<td>男</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
